<template>
  <div class="upload-data">
    <div class="form-box">
      <div class="form-title">
        <span class="required">*</span>身份证原件照片
        <a href="javascript: void(0);" @click="showExample(1)">示例</a>
        <div class="text-muted">请上传身份证正反面照片</div>
      </div>
      <div class="form-body">
        <el-upload
          :action="uploadUrl"
          :data="{user_id: user.id, type: 'card', type_id: 1}"
          list-type="picture-card"
          :on-remove="handleRemove"
          :on-success="cardSuccess"
          :file-list="cardList"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
      </div>
    </div>

    <div class="form-box" v-if="false">
      <div class="form-title">
        <span class="required">*</span>身份证复印件
        <a href="javascript: void(0);" @click="showExample(2)">示例</a>
        <div class="text-muted">请上传身份证正反面复印件</div>
      </div>
      <div class="form-body">
        <el-upload
          :action="uploadUrl"
          :data="{user_id: user.id, type: 'card_copy', type_id: 1}"
          list-type="picture-card"
          :on-remove="handleRemove"
          :on-success="cardCopySuccess"
          :file-list="card_copyList"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
      </div>
    </div>

    <div class="form-box">
      <div class="form-title">
        <span class="required">*</span>个人证件照
        <a href="javascript: void(0);" @click="showExample(3)">示例</a>
        <div class="text-muted">请上传最近一寸免冠照片</div>
      </div>
      <div class="form-body">
        <el-upload
          :action="uploadUrl"
          :data="{user_id: user.id, type: 'avatar', type_id: 3}"
          list-type="picture-card"
          :on-remove="handleRemove"
          :on-success="avatarSuccess"
          :file-list="avatarList"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
      </div>
    </div>

    <div class="form-box">
      <div class="form-title">
        学历证明
        <a href="javascript: void(0);" @click="showExample(4)">示例</a>
        <div class="text-muted">请上传个人获得的最高学历学位证件照片或复印件</div>
      </div>
      <div class="form-body">
        <el-upload
          :action="uploadUrl"
          :data="{user_id: user.id, type: 'education', type_id: 2}"
          list-type="picture-card"
          :on-remove="handleRemove"
          :on-success="educationSuccess"
          :file-list="educationList"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
      </div>
    </div>

    <div class="form-box">
      <div class="form-title">
        工资银行卡
        <a href="javascript: void(0);" @click="showExample(5)">示例</a>
        <div class="text-muted">请上传工资卡，方便公司为您发放工资</div>
      </div>
      <div class="form-body">
        <el-upload
          :action="uploadUrl"
          :data="{user_id: user.id, type: 'bank', type_id: 5}"
          list-type="picture-card"
          :on-remove="handleRemove"
          :on-success="bankSuccess"
          :file-list="bankList"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
      </div>
    </div>

    <!-- 隐藏不要 -->
    <div class="form-box" v-if="false">
      <div class="form-title">
        社保卡
        <a href="javascript: void(0);" @click="showExample(6)">示例</a>
        <div class="text-muted">请上传社保卡账号信息，方便公司帮您缴纳社保</div>
      </div>
      <div class="form-body">
        <el-upload
          :action="uploadUrl"
          :data="{user_id: user.id, type: 'card_social', type_id: 6}"
          list-type="picture-card"
          :on-remove="handleRemove"
          :on-success="cardSocialSuccess"
          :file-list="card_socialList"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
      </div>
    </div>

    <div class="form-box">
      <div class="form-title">
        其他
        <!-- <a href="javascript: void(0);" @click="showExample(7)">示例</a> -->
      </div>
      <div class="form-body">
        <el-upload
          :action="uploadUrl"
          :data="{user_id: user.id, type: 'other', type_id: 15}"
          list-type="picture-card"
          :on-remove="handleRemove"
          :on-success="otherSuccess"
          :file-list="otherList"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
      </div>
    </div>
    <Example :is-visible="showDialog" :type="exampleType" @close="close" />
  </div>
</template>

<script>
import { setTimeout } from 'timers'
import Example from './Example'
export default {
  name: 'UpdataData',
  props: ['user'],
  data () {
    return {
      uploadUrl: this.$axios.defaults.baseURL + '/home/attachment/upload',
      cardList: [],
      card_copyList: [],
      avatarList: [],
      educationList: [],
      bankList: [],
      card_socialList: [],
      otherList: [],
      exampleType: 1,
      showDialog: false
    }
  },
  created () {
    // 获取身份证照片
    setTimeout(() => {
      this.getList('card', 1)
      this.getList('card_copy', 1)
      this.getList('avatar', 3)
      this.getList('education', 2)
      this.getList('bank', 5)
      this.getList('card_social', 6)
      this.getList('other', 15)
    }, 1100)
  },
  methods: {
    getList (type, typeId) {
      this.$axios.post('/home/attachment/get', { user_id: this.user.id, type_id: typeId, type })
        .then(response => {
          if (response.data.code === 1) {
            this[`${type}List`] = response.data.data
          } else {
            this.$toast.fail(response.data.msg)
          }
        })
        .catch(() => { })

      return this
    },
    // 删除
    handleRemove (file, fileList) {
      this.$axios.post('/home/attachment/delete', { id: file.id, user_id: this.user.id })
        .then(response => {
          if (response.data.code === 1) {
            // this.getCardList()
          } else {
            this.$toast.fail(response.data.msg)
          }
        })
        .catch(() => { })
    },
    // 上传
    cardSuccess (response, file, fileList) {
      this.handleSuccess(response, 'card')
    },
    cardCopySuccess (response, file, fileList) {
      this.handleSuccess(response, 'card_copy')
    },
    avatarSuccess (response, file, fileList) {
      this.handleSuccess(response, 'avatar')
    },
    bankSuccess (response, file, fileList) {
      this.handleSuccess(response, 'bank')
    },
    cardSocialSuccess (response, file, fileList) {
      this.handleSuccess(response, 'card_social')
    },
    cardFundSuccess (response, file, fileList) {
      this.handleSuccess(response, 'card_fund')
    },
    educationSuccess (response, file, fileList) {
      this.handleSuccess(response, 'education')
    },
    otherSuccess (response, file, fileList) {
      this.handleSuccess(response, 'other')
    },
    // 上传成功
    handleSuccess (response, type) {
      console.log(type)
      if (response.code === 1) {
        // 上传成功
        this[`${type}List`].push(response.data)
      } else {
        this.$toast.fail(response.msg)
      }
    },
    close () {
      this.showDialog = false
    },
    showExample (type) {
      this.exampleType = type
      this.showDialog = true
    }
  },
  components: {
    Example
  }
}
</script>

<style lang="stylus" scoped>
.form-body
  padding 10px 0 0 0
</style>
